<template>
	<div :class="['tab-wrap', `tab-wrap${tabLevel}`]">
		<div
			v-for="(item, index) in tabList"
			:key="index"
			@click="changeTab(item)"
			:class="['tab-item', item.value === curTab ? 'active' : '', item.disabled ? 'tab-disabled' : '']"
		>
			<div class="name">{{ item.name }}</div>
			<div class="block" v-for="v in 4" :key="v" />
		</div>
		<div class="tail-blocks">
			<div class="item" v-for="v in 3" :key="v" />
		</div>
	</div>
</template>

<script setup>
defineProps({
	curTab: {
		type: String,
		default: ""
	},
	tabList: {
		type: Array,
		default: () => []
	},
	// 选项卡级别
	tabLevel: {
		type: Number,
		default: () => 1
	}
});
const emit = defineEmits(["update:curTab", "change"]);
function changeTab(data) {
	if (!data.disabled) {
		emit("update:curTab", data.value);
		emit("change", data.value);
	}
}
</script>

<style lang="scss" scoped>
.tab-wrap {
	display: flex;
	border-bottom: 1px solid var(--el-button-color-primary);
	.tab-item {
		border: 1px solid transparent;
		border-bottom: 0;
		height: 32px;
		box-sizing: content-box;
		color: var(--font-second-color);
		font-size: 14px;
		cursor: pointer;
		.name {
			height: 100%;
			display: flex;
			align-items: center;
		}
		&:hover,
		&.active {
			color: var(--el-color-primary);
		}
		&.tab-disabled {
			color: var(--font-none-describe-color);
			cursor: not-allowed;
		}
	}
}
.tab-wrap1 {
	gap: 8px;
	position: relative;
	.tab-item {
		padding: 0 36px !important;
		background: var(--el-tab-bg-color);
		position: relative;
		top: 1px;
		&.active {
			border: 1px solid rgba(var(--el-color-primary-rgb), 0.5);
			.block {
				width: 3px;
				height: 3px;
				background: rgba(var(--el-color-primary-rgb), 1);
				position: absolute;
				&:nth-child(2) {
					left: -1px;
					top: -1px;
				}
				&:nth-child(3) {
					top: -1px;
					right: -1px;
				}
				&:nth-child(4) {
					left: -1px;
					bottom: -1px;
				}
				&:last-child {
					right: -1px;
					bottom: -1px;
				}
			}
		}
		&.tab-disabled {
			background: var(--el-button-color-disabled);
		}
	}
	.tail-blocks {
		position: absolute;
		right: 2px;
		bottom: 0;
		display: flex;
		gap: 4px;
		.item {
			width: 16px;
			height: 5px;
			background: var(--el-color-primary);
			transform: skewX(40deg);
		}
	}
}
.tab-wrap2 {
	background: var(--el-tab-bg-color);
	.tab-item {
		padding: 0 22px;
		&.active {
			.name {
				border-bottom: 3px solid var(--el-color-primary);
			}
		}
	}
}
</style>
